<template>
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="50px"
      class="add-admin-form"
    >
        <el-form-item label="状态">
            <el-select
                v-model="form.status"
                placeholder="状态"
                clearable
                >
                <el-option v-for="(txt, index) in statuslist" :key="index" :label="txt" :value="Number(index)" />
            </el-select>
        </el-form-item>


      </el-form>
  </template>
  
  <script setup>
  import { ref, reactive, watch } from 'vue';
  import { ElMessage } from 'element-plus';
  const props = defineProps({
    formData: {
      type: Object,
      default: () => null
    },
    statuslist:{}
  });
  const formRef = ref(null);
  const form = reactive({
    status: 0
  });
  // 监听formData变化，更新表单数据
  watch(() => props.formData, (newVal) => {
    if (newVal) {
      Object.assign(form, newVal);
    }
  }, { immediate: true });
  
  // 重置表单
  const resetForm = () => {
    if (formRef.value) {
      formRef.value.resetFields();
    }
    Object.assign(form, {
        name: '',
        sort: 0,
        status: 1
    });
  };
  
  // 验证规则
  const rules = {
    status: [
      { required: true, message: '请选择状态', trigger: 'change' }
    ]
  };
  
  const validateForm = async () => {
    try {
      await formRef.value.validate();
      return true;
    } catch (error) {
      ElMessage.error('请检查表单填写是否正确');
      return false;
    }
  };
  
  defineExpose({
    formRef,
    form,
    validateForm,
    resetForm
  });
  </script>
  
  <style scoped>
  .add-admin-form {
    padding: 20px;
  }
  </style> 